<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>${title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="${staticPath}/admin/iconfont/iconfont.css" type="text/css" rel="stylesheet">
    <style type="text/css">
        .search-box {
            position:absolute;
            margin:0;
            left:1rem;
            top:1rem;
            right:1rem;
        }
        .search-box input {
            width:100%;
            font-size:0.8rem;
            padding:0.7rem;
            border-radius: 0;
            border:1px solid #F0F0F0;
            -webkit-appearance: none;
        }
        .iconfont {
            float:right;
            color:#AAA;
            font-size:0.7rem;
            margin-top:0.3rem;
        }
        .title {
            font-weight: bold;
            font-size:0.9rem;
            padding:0.5rem;
            color:#999;
        }
        .catalog-link {
            margin:0;
            display: block;
            padding:0.8rem;
            text-decoration: none;
            border-bottom:1px solid #F0F0F0;
            color:#666;
            font-size:0.9rem;
        }
        .article-link {
            margin:0;
            display: block;
            padding:0.8rem;
            text-decoration: none;
            border-bottom:1px solid #F0F0F0;
            color:#666;
            font-size:0.9rem;
        }
        .catalog-link:active, .article-link:active {
            background: #F0F0F0;
        }
    </style>
</head>
<body style="background: #F0F0F0;margin:0;padding:0;">
    <div style="height:5rem;">
        <div class="search-box">
            <form method="get" action="${ctx}/kf/help/index">
                <input type="search" name="keyword" value="${keyword}" placeholder="搜索关键字" />
            </form>
        </div>
    </div>
    <c:if test="${catalogs.size() eq 0 and articles.size() eq 0}">
        <div class="title">无内容</div>
    </c:if>
    <c:if test="${catalogs.size() ne 0}">
        <div class="title">分类</div>
        <div style="background: #FFFFFF;">

            <c:forEach items="${catalogs}" var="catalog">
                <a class="catalog-link" href="${ctx}/kf/help/index?parentCatalogId=${catalog.id}">
                        ${catalog.name}
                    <span class="iconfont icon-lunboyoufangun"></span>
                </a>
            </c:forEach>
        </div>
    </c:if>

    <c:if test="${articles.size() ne 0}">
        <div class="title">常见问题</div>
        <div style="background: #FFFFFF;">
            <c:forEach items="${articles}" var="article">
                <a class="article-link" href="${ctx}/kf/help/article?id=${article.id}">
                        ${article.title}
                    <span class="iconfont icon-lunboyoufangun"></span>
                </a>
            </c:forEach>
        </div>
    </c:if>
</body>
</html>
